<template>
	<view class="container">
		<view class="form-box">
			<view class="item-box">
				<view class="item-label">高中地址</view>
				<view class="item-input">
					<picker mode="multiSelector" @change="regionConfirm" @columnchange="regionChange" :range="regionList" range-key="regionName">
						<view class="uni-input">
							{{regionList[0][regionIndex[0]].regionName}}{{regionList[1][regionIndex[1]].regionName}}
						</view>
					</picker>
				</view>
				<view class="item-arrow">
					<image src="../../static/images/14x24.png"></image>
				</view>
			</view>
			<view class="item-box">
				<view class="item-label">高中</view>
				<view class="item-input">
					<picker @change="highSchoolChange" :range="highSchoolList" :value="highSchoolIndex" range-key="highSchoolName">
						<view class="uni-input">{{highSchoolList[highSchoolIndex].highSchoolName}}</view>
					</picker>
				</view>
				<view class="item-arrow">
					<image src="../../static/images/14x24.png"></image>
				</view>
			</view>
			<view class="item-box">
				<view class="item-label">班级</view>
				<view class="item-input">
					<picker @change="highSchoolClassChange" :range="highSchoolClassList" :value="highSchoolClassIndex" range-key="highSchoolClassName">
						<view class="uni-input">{{highSchoolClassList[highSchoolClassIndex].highSchoolClassName}}</view>
					</picker>
				</view>
				<view class="item-arrow">
					<image src="../../static/images/14x24.png"></image>
				</view>
			</view>
			<view class="tip">*确认信息后将不可修改</view>
		</view>
		<view class="submit-btn" @tap="goGroupChatList">确认</view>
	</view>
</template>

<script>
	import { http, showToastMsg } from '../../utils'
	
	export default {
		data() {
			return {
				regionList: [[{regionId: 0, regionName: '选择高中地址'}], [{regionId: 0, regionName: ''}]],
				regionIndex: [0, 0],
				highSchoolList: [
					{highSchoolId: 0, highSchoolName: '请选择高中'}
				],
				highSchoolIndex: 0,
				highSchoolClassList: [
					{highSchoolClassId: 0, highSchoolClassName: '请选择班级'}
				],
				highSchoolClassIndex: 0
			}
		},
		
		onLoad() {
			this.fetchRegionData()
		},
		
		methods: {
			
			goGroupChatList() {
				uni.redirectTo({
					url: '/pages/group_chat_list/group_chat_list'
				})
			},
			
			regionChange(e) {
				if (e.detail.column == 0) {
					this.regionList[1] = this.regionList[0][e.detail.value].regionChildren
					this.$forceUpdate()
				}
			},
			
			regionConfirm(e) {
				const that = this
				that.regionIndex = e.detail.value
				let cityId = that.regionList[1][that.regionIndex[1]].regionId
				let params = {
					cityId: cityId
				}
				http('/no-login/highschool', params, {hideLoading: true}).then(res => {
					if (res.code == 20000) {
						let data = res.data
						
						that.highSchoolList = []
						that.highSchoolIndex = 0
						that.highSchoolList.push({highSchoolId: 0, highSchoolName: '请选择高中'})
						
						that.highSchoolClassList = []
						that.highSchoolClassIndex = 0
						that.highSchoolClassList.push({highSchoolClassId: 0, highSchoolClassName: '请选择班级'})
						
						for (let i = 0; i < data.length; i++) {
							that.highSchoolList.push(data[i])
						}
					}
				})
			},
			
			fetchRegionData() {
				const that = this
				http('/no-login/region', {}, {hideLoading: true}).then(res => {
					if (res.code == 20000) {
						let data = res.data
						for (let i = 0; i < data.length; i++) {
							that.regionList[0].push(data[i])
						}
						let childData = data[0].regionChildren
						for (let i = 0; i < childData.length; i++) {
							that.regionList[1].push(childData[i])
						}
					}
				})
			}
			
		}
	}
</script>

<style>
	.container {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.form-box {
		width: 650rpx;
		margin-top: 20rpx;
	}
	
	.item-box {
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 2rpx solid #eeeeee;
	}
	
	.item-label {
		width: 180rpx;
		color: #333333;
		font-size: 30rpx;
	}
	
	.item-input {
		width: 450rpx;
	}
	
	.item-arrow image {
		width: 14rpx;
		height: 24rpx;
	}
	
	.tip {
		color: #f85d5d;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
	
	.submit-btn {
		width: 700rpx;
		height: 78rpx;
		background-color: #45d6b7;
		border-radius: 40rpx;
		color: #ffffff;
		font-size: 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 100rpx;
	}
</style>
